import { FolderOpenOutlined, FileOutlined } from '@ant-design/icons';
import { Input, Popover, Divider } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './index.scss';
import File from './file';
import { DirTreeType, getCurrentId } from '../../client/file';
import { ipcRenderer } from 'electron';
interface IDirectory extends DirTreeType {
  childrens: Array<DirTreeType>;
}

const Directory: React.FC<IDirectory> = (props) => {
  const [name, setName] = useState<string>('');
  const [visible, setVisible] = useState(false);
  const [expand, setExpand] = useState(false);
  const [edit, setEdit] = useState(false);
  const [isAppend, setIsAppend] = useState(false);
  const [createType, setCreateType] = useState<string>();
  const [children, setChildren] = useState<Array<DirTreeType>>([]);

  useEffect(() => {
    document.body.addEventListener('click', () => {
      setVisible(false);
    });
    return () => {
      document.body.removeEventListener('click', () => {
        setVisible(false);
      });
    };
  }, []);
  useEffect(() => {
    setName(props.name);
  }, [props.name]);

  useEffect(() => {
    setChildren(props.childrens);
  }, [props.childrens]);

  const onChange = (e: any) => {
    const name = e.target?.value?.trim();
    setName(name);
  };

  const changeDirExpand = () => {
    setExpand(!expand);
  };

  const onBlur = (e: any) => {
    const name = e.target?.value?.trim();
    setName(name);
  };
  const onAddBlur = (e: any) => {
    const name = e.target?.value?.trim();
    const id = getCurrentId();

    if (createType === 'directory') {
      children.unshift({
        name,
        path: props.path,
        id,
        type: 'directory',
        children: [],
        parentId: props.id,
      });
      ipcRenderer.send('mkdir', props.path, name);
    } else {
      children.unshift({
        name,
        path: props.path,
        id,
        type: 'file',
        parentId: props.id,
      });
      ipcRenderer.send('mkfile', props.path, name);
    }

    setCreateType('');
    setChildren(children);
    setIsAppend(false);
  };

  const onContextMenu = () => {
    setVisible(true);
  };
  const createDir = () => {
    setCreateType('directory');
    setVisible(false);
    setExpand(true);
    setIsAppend(true);
  };
  const createFile = () => {
    setCreateType('file');
    setVisible(false);
    setExpand(true);
    setIsAppend(true);
  };
  const renameFolder = () => {
    setVisible(false);
    setExpand(true);
    setIsAppend(true);
  };
  const deleteFolder = () => {
    setVisible(false);
    setExpand(true);
    setIsAppend(true);
  };
  const content = () => {
    return (
      <div>
        <div onClick={createDir}>新建文件夹</div>
        <Divider style={{ margin: '5px' }} />
        <div onClick={createFile}>新建文件</div>
        <Divider style={{ margin: '5px' }} />
        <div onClick={renameFolder}>重命名</div>
        <Divider style={{ margin: '5px' }} />
        <div onClick={deleteFolder}>删除</div>
      </div>
    );
  };

  const getAddChild = () => {
    return (
      <div className={styles.directory}>
        <div className="left-icon">
          {createType === 'file' ? <FileOutlined /> : <FolderOpenOutlined />}
        </div>
        <div className={styles.addFolderTitle}>
          <Input
            defaultValue="新建文件夹"
            onPressEnter={onAddBlur}
            onBlur={onAddBlur}
          />
        </div>
        {createType === 'directory' && (
          <div className={styles.icon}>
            <svg
              t="1628144544745"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1609"
              width="32"
              height="32"
            >
              <path
                d="M841.216 584.704a42.666667 42.666667 0 1 0-60.8-59.861333L554.666667 753.92V170.666667a42.666667 42.666667 0 0 0-85.333334 0v583.04L243.84 524.8a42.666667 42.666667 0 0 0-60.8 59.861333l291.114667 295.466667a53.333333 53.333333 0 0 0 75.946666 0l291.114667-295.466667z"
                p-id="1610"
                fill="#e6e6e6"
              ></path>
            </svg>
          </div>
        )}
      </div>
    );
  };

  return (
    <div className={styles.directoryContainer}>
      <Popover content={content} visible={visible}>
        <div
          className={styles.directory}
          onClick={changeDirExpand}
          onContextMenu={onContextMenu}
        >
          <div className="left-icon">
            <FolderOpenOutlined />
          </div>
          <div className={styles.folderTitle}>
            {' '}
            {!edit ? (
              name
            ) : (
              <Input value={name} onBlur={onBlur} onChange={onChange}></Input>
            )}
          </div>
          <div className={styles.icon}>
            <svg
              className={expand ? styles.expand : ''}
              t="1628144544745"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1609"
              width="32"
              height="32"
            >
              <path
                d="M841.216 584.704a42.666667 42.666667 0 1 0-60.8-59.861333L554.666667 753.92V170.666667a42.666667 42.666667 0 0 0-85.333334 0v583.04L243.84 524.8a42.666667 42.666667 0 0 0-60.8 59.861333l291.114667 295.466667a53.333333 53.333333 0 0 0 75.946666 0l291.114667-295.466667z"
                p-id="1610"
                fill="#e6e6e6"
              ></path>
            </svg>
          </div>
        </div>
      </Popover>

      {isAppend && getAddChild()}
      {Boolean(expand) &&
        children &&
        children.map((item: DirTreeType) => {
          return item.children ? (
            <Directory {...item} childrens={item.children} key={item.id} />
          ) : (
            <File
              {...item}
              key={item.id}
              onCreateDir={createDir}
              onCreateFile={createFile}
            />
          );
        })}
    </div>
  );
};
export default Directory;
